<template>
  <div class="container">
    <div class="headTop">
      <el-row>
        <el-col :span="4">
          <div class="title">积分钱袋管理系统</div>
        </el-col>
        <el-col :span="20">
          <div class="header">
            <div class="userInfo">
              <span class="img">
                <img
                  src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1079592840,2327344920&fm=27&gp=0.jpg"
                  alt
                >
              </span>
              <span class="account">欢迎&nbsp;,&nbsp;{{this.account}}</span>
              <span class="loginOut" @click="loginOut()">退出</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="4">
        <div class="sidebar" :style="{'height':(windowHeight - 60)+'px'}">
          <sideBar></sideBar>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="content">
          <breadCrumb></breadCrumb>
          <div class="cont-wrapper" :style="{'height':(windowHeight-124)+'px'}">
            <div class="contInfo">
              <router-view></router-view>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sideBar from "./common/sidebar.vue";
import breadCrumb from "./common/breadcrumb.vue";
export default {
  data() {
    return {
      account:""
      // windowHeight: document.documentElement.clientHeight
    };
  },
  created() {
      this.account = sessionStorage.getItem("account");
  },
  computed: {
    windowHeight() {
      return document.documentElement.clientHeight;
    }
  },
  mounted() {},
  components: { sideBar, breadCrumb },
  methods: {
    //退出
    loginOut() {
      let url = "/admin/logout";
      this.httpGet(url, res => {
        if (res.code == 200) {
          this.$router.push("/login");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  // 顶部
  .headTop {
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    z-index: 99;
    .title {
      height: 60px;
      padding-left: 20px;
      box-sizing: border-box;
      line-height: 60px;
      width: 100%;
      color: #fff;
      font-size: 24px;
      background: #409eff;
    }
    .header {
      position: relative;
      height: 60px;
      width: 100%;
      background: #409eff;
      .userInfo {
        height: 60px;
        width: 300px;
        position: absolute;
        top: 0;
        right: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          display: inline-block;
          height: 40px;
          width: 40px;
          float: left;
          img {
            height: 100%;
            border-radius: 50%;
          }
        }
        .account {
          display: inline-block;
          color: #fff;
          max-width: 180px;
          height: 60px;
          line-height: 60px;
          padding: 0 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .loginOut {
          display: inline-block;
          color: #fff;
          width: 40px;
          height: 60px;
          line-height: 60px;
        }
      }
    }
  }
  .sidebar {
    margin-top: 60px;
    width: 100%;
    background-color: rgb(84, 92, 100);
    overflow-y: scroll;
    //取消滚动条默认样式
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .content {
    margin-top: 60px;
    width: 100%;
    background: #f0f0f0;
    .cont-wrapper {
      background: #fff;
      overflow-y: scroll;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
      &::-webkit-scrollbar {
        display: none;
      }
      .contInfo {
        margin: 10px;
        background: #fff;
        height: 96%;
      }
    }
  }
}
</style>